<template>
  <section>
    <div class="card">
      <div class="title">负载工作状态</div>
      <div class="pie-box">
        <div v-for="(value, key) in app" :key="key" class="pie-item">
          <div class="echart-box">
            <div class="pie-title">{{ key }}</div>
            <echart :id="key" :config="value.config"></echart>
            <div v-for="(d, k) in value.value" :key="k" class="pie-data">
              <div>{{ k }}</div>
              <div>{{ d }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="title">组件状态</div>
      <div class="component-box"> 
        <div v-for="(value, key) in component" :key="key">
          <div v-if="value == 'True'" class="component-item">
            <div class="left left-check"><i class="el-icon-check"></i></div>
            <div class="right right-check">
                <div>{{key}}</div>
                <el-tooltip class="item" effect="dark" content="用户名：admin； 初始密码：admin" placement="top-start" :disabled="showTooltip">
                    <div class="grafana-btn" @click="toPage('grafana', components_uri[key])" @mouseenter="FnshowTooltip" @mouseleave="FnHideTooltip">
                        <img :src="monitorIconImg" alt="" />
                    </div>
                </el-tooltip>
            </div>
        </div>
        <div v-else  class="component-item">
            <div class="left left-close"><i class="el-icon-close"></i></div>
            <div class="right right-close">
                <div>{{key}}</div>
                <el-tooltip class="item" effect="dark" content="用户名：admin； 初始密码：admin" placement="top-start" :disabled="showTooltip">
                    <div class="grafana-btn" @click="toPage('grafana', components_uri[key])"  @mouseenter="FnshowTooltip" @mouseleave="FnHideTooltip">
                        <img :src="monitorIconImg" alt="" />
                    </div>
                </el-tooltip>
            </div>
        </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import echart from "../../components/echart.vue"

export default {
  components: { echart },
  data() {
    return {
      app: {
          Container: {
              value: {Running: 82, Waiting: 4, Terminated: 4},
              color: ["#41B1F5", "#FFAF69", "#FF9A9A"],
              config: {}
          },
          Pod: {
              value: {Running: 58, Pending: 4, Succeeded: 3, Failed: 1, Unknown: 1},
              color: ["#41B1F5", "#FFAF69", "#72D478", "#FF9A9A", "#CCCCCC"],
              config: {}
          },
          Deployment: {
              value: {True: 17, False: 1},
              color: ["#72D478", "#FF9A9A", "#CCCCCC"],
              config: {}
          },
          Statefulset: {
              value: {True: 3, False: 2},
              color: ["#72D478", "#FF9A9A"],
              config: {}
          }
      },
      app_config: {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          color: ["#56ab9c", "#d77729", "#d34a39"],
          series: [
              {
                  name: 'Container',
                  type: 'pie',
                  radius: ['60%', '90%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                  },
                  label: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '24',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: []
              }
          ],
          resize: 0
      },
      component: {
        Etcd: "True",
        "Kube-scheduler": "False",
        Kubectl: "True"
      },
      components_uri: {
          Etcd: "/d/72e0e05bef5099e5f049b05fdc429ed5/kubernetes-etcd",
          "Kube-scheduler": "/d/2e6b6a3b4bddf1427b3a55aa1311c656/kubernetes-scheduler",
          "Kubectl": "/d/3138fa155d5915769fbded898ac09fd9/kubernetes-kubelet"
      },
      monitorIconImg: require("@/components/svg-icon/monitor.svg"),
      domain: {
        grafana: ""
      }
    }
  },
  methods: {
    FnHandleData() {
      for(let app_key in this.app) {
        let item = this.app[app_key]
        item.config.color = item.color
        item.config.series[0].name = app_key
        item.config.series[0].data = []
        for(let key in item.value) {
          item.config.series[0].data.push({
            value: item.value[key],
            name: key
          })
        }
      }
    },
    FnshowTooltip() {
        this.showTooltip = false
    },
    FnHideTooltip() {
        this.showTooltip = true
    },
    toPage(type, uri) {
      window.open("http://" + this.domain[type] + "" + uri)  
    },
  },
  created() {
    this.app.Container.config = JSON.parse(JSON.stringify(this.app_config))
    this.app.Pod.config = JSON.parse(JSON.stringify(this.app_config))
    this.app.Deployment.config = JSON.parse(JSON.stringify(this.app_config))
    this.app.Statefulset.config = JSON.parse(JSON.stringify(this.app_config))

    this.FnHandleData()
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 20px;
  padding-bottom: 20px;
  background: #fff;
  border: 1px solid #e2e3e9;
  .title {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
  }
}
.pie-box {
  display: flex;
  min-width: 1200px;
  padding: 10px 0;
  .pie-item {
    width: 25%;
    .echart-box {
      width: 260px;
      margin: 0 auto;
      .pie-title {
        text-align: center;
        font-size: 14px;
        font-weight: bold;
      }
      .pie-data {
        display: flex;
        justify-content: space-between;
        width: 200px;
        margin: 0 auto;
        line-height: 26px;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
}
.component-box{
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  &>div{
    width: 30%;
  }
  .component-item{
      display: flex;
      width: 100%;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      .left{
          width: 40px;
          text-align: center;
          font-size: 20px;
          font-weight: bolder;
      }
      .left-check{
          background: #72D478;
          color: #206e3e;
      }
      .right{
          flex: 1;
          line-height: 28px;
          padding: 0 8px;
          display: flex;
          justify-content: space-between;
          i{
            color: #FFAF69;
          }
          .grafana-btn {
            cursor: pointer;
            line-height: 32px;
            &:focus {outline: none}
          }
      }
      .right-check{
          background: rgba(114,212,120,0.1);
          border: 2px solid #72D478;
      }
      .left-close{
          background: #FF9A9A;
          color: #b16868;
      }
      .right-close{
          background: rgba(255,154,154,0.1);
          border: 2px solid #FF9A9A;
      }
  }
}
</style>